<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            margin: 200px auto;
            width: 120px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(96, 149, 255);
            color: #fff;
            border-radius: 4px;
            filter: url(#filter);
        }
    </style>

</head>

<body>
    <a href="http://school.webkaka.com/svg/svg_filters.html" target="_blank">SVG Filter</a><br>
    <a href="https://greensock.com/" target="_blank">JS动画库gsap.js</a>
    <svg style="display: none;">
        <defs>
            <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
                primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
                <feTurbulence type="turbulence" baseFrequency="0 0.00001" numOctaves="2" seed="2" stitchTiles="stitch"
                    x="0%" y="0%" width="100%" height="100%" result="turbulence5" />
                <feDisplacementMap in="SourceGraphic" in2="turbulence5" scale="20" xChannelSelector="R"
                    yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap2" />
            </filter>
        </defs>
    </svg>
    <div class="btn">Hover Me</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.11.5/gsap.js"></script>
    <script>
        const tur = document.querySelector('feTurbulence')
        const btn = document.querySelector('.btn')
        const tl = new gsap.timeline({
            paused: true,
            onUpdate () {
                tur.setAttribute('baseFrequency', `0 ${val.freq}`)
            }
        })
        const val = {
            freq: 0.00001
        }
        tl.to(val, {
            freq: 0.4,
            duration: 0.1
        })
        tl.to(val, {
            freq: 0.00001,
            duration: 0.1
        })
        btn.onmouseenter = () => tl.restart()
    </script>
</body>

</html>